<template>
	<view class="takePic">
		<Nav v-show="!show&&navShow" title="拍照" :parentObj="{ ...this }" :screenWidth="$SystemInfo.systemInfo().screenWidth"
			:leftIconColor="'#FFF'" @onClickRight="onClickRight" />
		<!-- <Nav @right="clickRight" v-show="!show&&navShow" title="拍照" /> -->
		<!-- <tabBar :btnObject="btnObject" @select="tabBarSelect"></tabBar> -->
		<!-- <image src="/static/start.jpg" style="background-size:cover; width: 100%; height: 100%; background-repeat: no-repeat;" mode="aspectFill"></image> -->
		<!-- <view class="example" :style="{display:show?'block':'none'}">
			<button type="default" @click="startTakePic">Go</button>
			<button class="backBtn" type="default" @click="toProjectList"> <uni-icons type="home-filled" color="#d1100a"
					size="30"></uni-icons>
			</button>
		</view> -->
		<!-- 首屏动画组件 -->
		<Transition ref="Transition" :parentObj="{ ...this }" :show="show" @startTakePic="startTakePic"
			@changeAuthCameraStartTakePic="changeAuthCameraStartTakePic" @toProjectList="toProjectList" />
		<scroll-view v-if="show==false" scroll-y="true" :style="{height:height+'px'}">
			<view class="form">
				<uni-forms ref="form" :rules="{}">
					<view v-for="(item,index) in entity.imglist" :key="index">
						<view style="display: flex;justify-content: space-between;" v-if="item.Mtype==='audio'">
							<eliseAudio audioId="audio1" :url="item.Murl" audioColor="#68d7bb" :durationS="item.duration"
								ref="eliseAudio" v-if="item.Mtype==='audio'" style="margin-bottom: 10px;"></eliseAudio>

							<uni-icons type="trash" v-if="item.Mtype==='audio'" @click="imgDel(item.Murl)" class="color" size="20"
								color="red"></uni-icons>
						</view>
					</view>
					<uni-forms-item name="">
						<uni-grid :column="3" :showBorder="false">
							<view v-for="(item,index) in entity.imglist" :key="index">
								<uni-grid-item style="position: relative;padding: 5rpx;box-sizing: border-box;"
									v-if="item.Mtype==='image'||item.Mtype==='video'">
									<image :src="item.Murl" style="width: 100%;height: 100%;" @click="lookimg(entity.imglist,'',index)"
										v-if="item.Mtype==='image'"></image>
									<view
										style="width: 100%;height: 100%;background: #000;position: relative;display: flex;justify-content: center;align-items: center;"
										v-if="item.Mtype==='video'" @click="lookimg(entity.imglist,'',index)">
										<uni-icons type="videocam-filled" size="30" color="#fff"></uni-icons>
									</view>

									<uni-icons type="trash-filled" @click="imgDel(item.Murl)" class="color" size="20" color="#fff"
										style="position: absolute; right: 5%;top: 5%;z-index: 9; background-color:#ef0a0a; border-radius: 5px;">
									</uni-icons>
								</uni-grid-item>
							</view>

							<uni-grid-item>
								<button style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"
									@click="uploadImage">
									<uni-icons type="camera-filled" size="30"></uni-icons>
								</button>
							</uni-grid-item>
						</uni-grid>
					</uni-forms-item>
					<!-- 模板 -->
					<uni-forms-item v-for="item in PropData" :key="item.ControlKey" :label="item.ControlName"
						:name="item.ControlKey">
						<text v-if="item.ControlName == '楼层' && isText==true " style="color:red;font-size:22rpx">*仅可输入"符号和字符"</text>
						<view v-if="item.ControlName == '楼层'"
							style="display: flex;flex-direction: column;border:1px solid #E5E5E5;border-radius: 10rpx;padding: 12rpx;">
							<!-- 暂时不删除  后续需要打开切换即可 -->
							<!-- 	<uni-easyinput placeholder="请输入(如负一层请输入 -1 )" type="number" @input="propInput($event,item)"
								v-model="entity[item.ControlKey]" suffixIcon="层"></uni-easyinput> -->
							<input placeholder-style="font-size:23rpx;padding-left:8rpx" placeholder="请输入(如负一层请输入 -1 )" type="text"
								@input="propInput($event,item)" v-model="entity[item.ControlKey]" suffixIcon="层" @focus="propInputFocus"
								@blur="propInputBlur"></input>
						</view>
						<view v-if="item.ControlType == 'select'">
							<uni-data-select @change="propItemChange($event,item)" v-model="entity[item.ControlKey]"
								:localdata="item.CVdata">
							</uni-data-select>
							<uni-easyinput @confirm="customize(item)" @blur="customize(item)" placeholder="输入后点击键盘确认进行添加"
								v-if="entity[item.ControlKey]=='自定义'" v-model="item.customize">
							</uni-easyinput>
						</view>
						<uni-easyinput style="" placeholder="请输入" v-if="item.ControlType == 'input'&&item.ControlName!='楼层'"
							@input="propInput($event,item)" v-model="entity[item.ControlKey]"></uni-easyinput>
						<view class="formCheck" v-if="item.ControlType == 'checkBox'">
							<view class="input" @click="openCheck(item)">
								<view class="value" v-if="entity[item.ControlKey]">{{entity[item.ControlKey]}}</view>
								<view class="noValue" v-else>请选择</view>
							</view>
							<view>
								<uni-icons @click="openCheck(item)" v-if="!entity[item.ControlKey]" type="bottom" size="14"
									color="#989898"></uni-icons>
								<uni-icons @click="clearCheckBoxSelect(item)" v-else type="clear" size="24" color="#c0c4cc"></uni-icons>
							</view>
							<CheckBoxSelect :ref="'CheckBoxSelect'+item.ControlKey" @confirm="CheckBoxSelectConfirm($event,item)" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="" style="position: relative;">
						<uni-easyinput type="textarea" autoHeight v-model="entity.Content" placeholder="描述内容" :maxlength="-1">
						</uni-easyinput>
						<!-- <uni-icons type="mic-filled" size="20" style="position: absolute;bottom: 10px;right: 10px;"
							@click="audioOpen()"></uni-icons> -->
					</uni-forms-item>
				</uni-forms>
				<button type="warn" @click="submit">保存</button>
			</view>
			<!-- 、v-show="preEntity.Content" -->
			<view class="preForm">
				<view class="preTitle">
					<text>上次提交</text>
					<!-- <text class="more" @click="toHistoricalRecord">更多</text> -->
				</view>
				<view class="preRemark">
					{{preEntity.Content}}
				</view>
				<view class="prePicBox">
					<view v-for="(item,index) in preEntity.imglist" :key="index" :class="index%3 == 1?'pic margin':'pic'">
						<image v-if="item.Mtype=='image'" style="width: 100%;height: 100%" :src="item.Murl" mode="aspectFill">
						</image>
						<view style="height: 100%;display: flex;justify-content: center;align-items: center;background-color: #000;"
							v-else>
							<uni-icons type="videocam-filled" size="40" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
			</view>

		</scroll-view>
		<!-- <uni-popup ref="audio" type="bottom" @close="audioClose" style="position: relative;" :is-mask-click="false"
			@maskClick="audioClose">

			<nb-voice-record @startRecord="start" @endRecord="end" @cancelRecord="cancel" btnDefaultText="录音"
				:popupFixBottom="250" btnHoverBgcolor="red" btnHoverFontcolor='#fff'
				:btnStyle="{width:'70px',height:'70px',background: 'red',color:'#fff',borderRadius: '50%',fontSize:'16px'}"
				style="float: left;margin-left: calc(50% - 35px);margin-bottom: 100rpx;">
			</nb-voice-record>
		</uni-popup> -->
		<ImageView ref="ImageView" @setEdit="setEditObj" @close="imageClose"></ImageView>
		<videoView ref="videoView"></videoView>
		<uni-popup ref="popup" type="bottom">
			<view style="padding: 10rpx;">
				<button @click="upclick('拍照')">拍照</button>
				<button style="margin-top: 10rpx;" @click="upclickVideo('拍视频')">拍视频</button>
				<button style="margin-top: 10rpx;" @click="upclickImage('相册选取')">相册选取</button>
				<!-- <button style="margin-top: 10rpx;" @click="$refs.popup.close()">取消</button> -->
			</view>
		</uni-popup>
		<!-- <view id="canvas" class="canvas" :prop="newVal" :change:prop="canvas.create"></view> -->
		<AuthCamera ref="AuthCamera" type="top" @changeAuthCamera="changeAuthCamera"
			:permissionID="permissionIDAuthCamera" />
		<AuthPhoto ref="AuthPhoto" type="top" @changeAuthPhoto="changeAuthPhoto" :permissionID="permissionIDAuthPhoto" />
	</view>
</template>

<script>
	import AuthCamera from "@/components/yk-authpup/AuthCamera.vue";
	import AuthPhoto from "@/components/yk-authpup/AuthPhoto.vue";
	import permision from "@/utils/permission.js"
	// 引入首屏动画组件
	import Transition from './transition.vue'
	import Nav from '@/components/BackTabBar.vue'
	import ImageView from '@/components/ImageView.vue'
	import videoView from '@/components/videoView.vue'
	import eliseAudio from '@/components/elise-audio/elise-audio.vue'
	import tabBar from '@/components/tabBar.vue'
	import CheckBoxSelect from '@/components/checkBoxSelect.vue'
	import {
		mapActions
	} from 'vuex'
	export default {
		components: {
			ImageView,
			eliseAudio,
			videoView,
			tabBar,
			CheckBoxSelect,
			Nav,
			Transition,
			AuthCamera,
			AuthPhoto
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
			uni.navigateTo({
				url: '/pages/user/user'
			})
			return true;
		},
		computed: {
			loginStates() {
				return uni.getStorageSync('loginStates')
			}
		},
		onHide() {
			this.isPai = 2
			console.log('离开', this.isPai);

		},
		data() {
			return {
				permissionIDAuthCamera: "CAMERA",
				permissionIDAuthPhoto: 'READ_EXTERNAL_STORAGE',
				isText: false,
				newVal: '',
				style: {
					width: '100%',
					height: '100%',
				},
				preEntity: {},
				show: true,
				play: true,
				voicePath: "",
				radio: 0,
				radiolist: [

					{
						text: '在线模式',
						value: 1,
					},
					{
						text: '离线模式',
						value: 0,
					},

				],
				imglist: [],
				arr: ['camera'],
				ImgUrl: '',
				range: [{
					text: '1',
					value: '1',
					disabled: false
				}],
				ischose: false, //监听缓存提交
				entity: {
					Content: "",
					value: "",
					imglist: []
				},
				PropData: [],
				btnObject: {
					bg: '#fff',
					paddingR: '20',
					paddingL: '20',
					left: [],
					right: [{
						Name: '保存',
						type: 'warn',
						size: 'mini'
					}]
				},
				editObj: '',
				navShow: true,
				// 判断如果离开当前页签，就不要弹出拍照了。只有再次进入当前拍照页签时再弹出拍照。并且拍照一次后，再次进入当前页签后。不要频繁弹出
				isPai: 1,
				isPaiHaveIn: false,
				newType: "拍照",
				platform: uni.getSystemInfoSync().platform,
				uploadImageType: '', //记录点击上传的是logo图片区域 还是项目图片区域

			}
		},

		// **
		//  * 监听 TabBar 切换点击
		//  */
		onTabItemTap: function(item) {
			// if(this.isPai==2){
			// 	if(this.isPaiHaveIn==false){
			// 		this.upclick('in')
			// 	}else{
			// 		this.upclick('finish')
			// 	}
			// }
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res);
					// 可使用高度减去系统状态栏高度减去自定义导航高度
					this.height = res.windowHeight - res.statusBarHeight - 44
				}
			})
			uni.hideTabBar()
			this.show = true
			this.$http('Base_Manage/Home/AppSubmitLogin', {
				"userName": uni.getStorageSync('userName'),
				"password": uni.getStorageSync('password'),
			}).then(res => {
				if (res.Success) {
					uni.setStorageSync('tokenKey', 'Bearer ' + res.Data);
					this.$http('Base_Manage/Home/GetAppOperatorInfo?net=1').then(res => {
						uni.setStorageSync('userInfo', res.Data)
					})
				}
			})
			// 模板
			this.PropData = uni.getStorageSync('propData') || []
			this.$http('Base_ProjectWork/Base_Project/GetTakeNotesTypeData').then(res => {
				console.log(res);
				if (res.Success) {
					this.PropData = res.Data
					uni.setStorageSync('propData', res.Data)
				}
			})
		},
		onShow() {
			// 只有点击相册选取条件后，保存后再次调用拍照  这里初始化
			// this.newType = ""
			// 本地缓存中读取是否有编辑数据
			// if (uni.getStorageSync('editFile')) {
			// 	this.entity = JSON.parse(uni.getStorageSync('editFile'))
			// 	this.PropData = this.entity.PropData
			// }
			this.getUnreadTotal()
			// 是否有编辑图片数据
			if (uni.getStorageSync('localImgList')) {
				this.entity.imglist = JSON.parse(uni.getStorageSync('localImgList'))
				// this.$refs.ImageView.changeImgList(this.entity.imglist)
				uni.removeStorageSync('localImgList')
			}
		},
		onHide() {
			console.log('页面隐藏')
			// this.newType=""
		},
		methods: {
			...mapActions(['getUnreadTotal']),
			uploadImage() {
				this.$refs.popup.open()
			},
			// 顶部导航栏右侧图标点击事件
			onClickRight() {
				uni.navigateTo({
					url: '/pages/user/user'
				})
			},
			getBase64(e) {
				console.log(e);
			},
			imageClose() {
				this.navShow = true
			},
			clickRight() {
				uni.navigateTo({
					url: '/pages/user/user'
				})
			},
			clearCheckBoxSelect(item) {
				item.DefaultValue = ''
				this.$set(this.entity, item.ControlKey, '')
			},
			CheckBoxSelectConfirm(e, item) {
				item.DefaultValue = e.join(',')
				this.$set(this.entity, item.ControlKey, item.DefaultValue)
			},
			openCheck(item) {
				this.$refs['CheckBoxSelect' + item.ControlKey][0].open(item.CVdata, item.DefaultValue)
			},
			// 存储画图数据
			setEditObj() {
				console.log('存储画图数据');
				uni.setStorageSync('localImgList', this.editObj)
			},
			tabBarSelect(e) {
				if (e == '保存') {
					this.submit()
				}
			},
			// 去项目页
			toProjectList() {
				this.show = false
				uni.showTabBar()
				// uni.switchTab({
				// 	url: '/pages/List/ProjectList'
				// })
			},
			// 自定义
			customize(item) {
				if (item.CVdata.findIndex((im) => im.value == item.customize) !== -1)
					return this.$message.error("当前添加项已存在于列表中");
				item.CVdata.unshift({
					value: item.customize,
					text: item.customize,
				});
				this.$set(this.entity, item.ControlKey, item.customize);
				item.DefaultValue = item.customize;
				item.customize = "";
			},
			// 动态列表选择
			propItemChange(e, item) {
				if (e !== "自定义") {
					item.DefaultValue = e;
				}
			},
			// 动态列表填写
			propInput(e, item) {
				item.DefaultValue = e.detail.value
				// // const inputRule = /^(0+)|[^\d]+/g  //修改inputRule 的值/[^\w_-]/g
				// // const inputRule = /[^\w_-]/g  //只能输入字母，数字和部分特殊字符
				const inputRule = /[^\d_-]/g //只能输入数字和部分特殊字符
				this.$nextTick(function() { //针对楼层
					this.entity[item.ControlKey] = e.detail.value.replace(inputRule, '');
				})

			},
			// 楼层输入获取焦点提示
			propInputFocus() {
				this.isText = true
			},
			// 楼层输入失去焦点
			propInputBlur() {
				this.isText = false
			},
			// 历史提交
			toHistoricalRecord() {
				uni.navigateTo({
					url: './HistoricalRecord'
				})
			},
			// 相机权限使用说明子组件的方法
			changeAuthCamera() {},
			// 相册权限使用说明子组件的方法
			changeAuthPhoto() {},
			changeAuthCameraStartTakePic() {
				var that = this
				this.upclick()
				setTimeout(function() {
					that.show = false
				}, 1000)
			},
			// 开始拍照
			startTakePic() {
				this.upclick()
			},
			// 开始相册选择
			async upclickImage(type) {
				var that = this
				// 赋值  用于判断只有相册选取条件下才不会再次弹拍照
				this.newType = '相册选取'
				if (this.platform === 'android' || this.platform === 'Android') {

					// 同时展示相机，相册权限使用说明蒙版
					setTimeout(() => {
						that.$refs['AuthPhoto'].open();
					}, 500)
					//安卓判断权限
					this.$refs.popup.close() //关闭底部相机  相册 视频弹窗
					this.isPhotoLibrary = await permision.requestAndroidPermission(
						"android.permission.READ_EXTERNAL_STORAGE"); //判断安卓是否给予相册权限
					if (this.isPhotoLibrary !== 1) {
						this.$refs.popup.close() //关闭底部相机  相册 视频弹窗
						permision.requestPermission("photoLibrary", this.$store.state.mapping.PHOTO_LIBRARY.content, this.$store
							.state.mapping.PHOTO_LIBRARY.title)
						return
					}
				}

				uni.showTabBar()
				this.$refs.popup.close()
				this.ischose = true
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						// 临时路径注释 H5页面测试可放开后注释下面的
						// #ifdef H5
						var strFileName = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf(
							"/") + 1)
						var obj = {
							Mtype: "image",
							Murl: res.tempFilePaths[0],
							name: strFileName,
							FileSize: res.tempFiles[0].size
						}
						this.entity.imglist.push(obj)
						// #endif
						//保存本地永久路径 APP
						// #ifdef APP
						// 压缩图片
						uni.compressImage({
							src: res.tempFilePaths[0],
							quality: 30,
							success: result => {
								// 保存到本地
								uni.saveFile({
									tempFilePath: result.tempFilePath,
									success: (val) => {
										var strFileName = val.savedFilePath.substring(
											val.savedFilePath
											.lastIndexOf("/") + 1)
										var obj = {
											Id: new Date().getTime(),
											Mtype: "image",
											Murl: val.savedFilePath,
											name: strFileName,
											FileSize: res.tempFiles[0].size
										}

										this.entity.imglist.push(obj)
									}
								});
							}
						})
						// #endif
					}
				})

				this.show = false
			},
			audioClose() {
				uni.showTabBar()
				this.$refs.audio.close()
			},
			audioOpen() {
				uni.hideTabBar()
				this.$refs.audio.open()
			},
			start() {
				console.log('开始录音')
				// 开始录音
			},
			end(event) {
				this.audioClose()
				console.log(event)
				var audio1 = uni.createInnerAudioContext();
				audio1.src = event.tempFilePath
				var duration = 0
				setTimeout(() => {
					duration = audio1.duration.toFixed(2)
					var strFileName = event.tempFilePath.substring(event.tempFilePath.lastIndexOf("/") + 1)

					this.entity.imglist.push({
						Mtype: 'audio',
						name: strFileName,
						audioplay: true,
						duration: audio1.duration.toFixed(2),
						Id: new Date().getTime(),
						Murl: event.tempFilePath
					})
					console.log(this.entity.imglist)
					console.log(event)
				}, 100)

				// 结束录音并处理得到的录音文件
				// event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
			},
			cancel() {
				console.log('取消录音')
				// 用户取消录音
			},

			imgDel(url) { //删除图片
				console.log(url);
				let idx = this.entity.imglist.findIndex(item => item.Murl == url)
				console.log(idx, this.entity.imglist[idx]);
				if (idx === -1) return
				// #ifdef H5
				this.entity.imglist.splice(idx, 1)
				// #endif
				// #ifdef APP
				uni.removeSavedFile({ //删除本地文件 
					filePath: this.entity.imglist[idx].Murl,
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					},
					complete: (resa) => {
						this.entity.imglist.splice(idx, 1)
					}
				});
				// #endif
			},

			lookvideo(path) {
				this.$refs.videoView.open(path)
			},
			// 图片编辑
			lookimg(arr, content, index) { //查看图片 index 下标第几章图片  arr  上传好的图片数组
				this.navShow = false
				let obj = {
					imageList: arr,
					current: index,
					PropData: this.PropData,
					type: 'local'
				}
				// this.$refs.ImageView.open(arr, content, index, this.PropData, 'local')
				this.$refs.ImageView.open(obj)

				this.editObj = JSON.stringify(this.entity.imglist)
			},

			//用户授权权限后的回调
			changeAuth() {
				//这里是权限通过后执行自己的代码逻辑
				this.$emit('startTakePic')
			},

			async upclick(type) { //上传图片到本地获取到本地地址
				this.ischose = true
				this.$refs.popup.close() //关闭底部相机  相册 视频弹窗  
				var that = this
				this.newType = '拍照'
				if (type) {
					// 同时展示相机，相册权限使用说明蒙版
					setTimeout(() => {
						that.$refs['AuthCamera'].open();
					}, 500)
				}
				if (this.platform === 'android' || this.platform === 'Android') {
					//安卓判断权限
					this.$refs.popup.close() //关闭底部相机  相册 视频弹窗
					this.isCamera = await permision.requestAndroidPermission("android.permission.CAMERA"); //判断安卓是否给予摄像头权限
					if (this.isCamera !== 1) {
						this.$refs.popup.close() //关闭底部相机  相册 视频弹窗
						permision.requestPermission('camera', this.$store.state.mapping.WRITE_EXTERNAL_STORAGE.content, this.$store
							.state.mapping.WRITE_EXTERNAL_STORAGE.title)
						return
					}
				}

				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'],
					success: (res) => {
						console.log(res)
						// 临时路径注释 H5页面测试可放开后注释下面的
						// #ifdef H5
						var strFileName = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf(
							"/") + 1)
						var obj = {
							Mtype: "image",
							Murl: res.tempFilePaths[0],
							name: strFileName,
							FileSize: res.tempFiles[0].size
						}
						this.entity.imglist.push(obj)
						// #endif
						//保存本地永久路径 APP
						// #ifdef APP
						// 压缩图片
						uni.compressImage({
							src: res.tempFilePaths[0],
							quality: 30,
							success: result => {
								// 保存到本地
								uni.saveFile({
									tempFilePath: result.tempFilePath,
									success: (val) => {
										console.log(val)
										var strFileName = val.savedFilePath.substring(
											val.savedFilePath
											.lastIndexOf("/") + 1)
										var obj = {
											Id: new Date().getTime(),
											Mtype: "image",
											Murl: val.savedFilePath,
											name: strFileName,
											FileSize: res.tempFiles[0].size
										}

										this.entity.imglist.push(obj)
										console.log(this.entity.imglist);
									}
								});
							}
						})
						// #endif
					}
				})
				// 为了避免第一次进入app  点击首页启动页的GO进行拍照时， 先显示出了底部导航栏的问题  
				setTimeout(function() {
					uni.showTabBar() //显示底部导航栏
					that.show = false //关闭首页启动动画页
				}, 1500)

			},
			async upclickVideo(type) {
				var that = this
				// 初始化相册选取再次调用相机
				this.newType = '拍视频'
				if (this.platform === 'android' || this.platform === 'Android') {
					// 同时展示相机，相册权限使用说明蒙版
					setTimeout(() => {
						that.$refs['AuthCamera'].open();
					}, 500)
					//安卓判断权限
					this.$refs.popup.close() //关闭底部相机  相册 视频弹窗
					this.isCamera = await permision.requestAndroidPermission("android.permission.CAMERA"); //判断安卓是否给予摄像头权限
					if (this.isCamera !== 1) {
						this.$refs.popup.close() //关闭底部相机  相册 视频弹窗
						permision.requestPermission('camera', this.$store.state.mapping.WRITE_EXTERNAL_STORAGE.content, this.$store
							.state.mapping.WRITE_EXTERNAL_STORAGE.title)
						return
					}
				}
				// 后续需要打开
				// 	if (this.platform === 'ios') { //苹果判断权限
				// 		this.$refs.popup.close() //关闭底部相机  相册 视频弹窗
				// 		this.isCamera = await permision.judgeIosPermission('camera');
				// 	} else { //安卓判断权限
				// 		this.$refs.popup.close() //关闭底部相机  相册 视频弹窗
				// 		this.isCamera = await permision.requestAndroidPermission("android.permission.CAMERA"); //判断安卓是否给予摄像头权限
				// 	}

				// 	console.log('拍视频的相机权限', this.platform, this.isCamera)

				// 	// 判断手机系统是否已授权相机权限
				// 	if ((this.platform === 'ios' && this.isCamera == false) || (this.platform === 'android' && this.isCamera !==
				// 			1)) {
				// 		this.$refs.popup.close() //关闭底部相机  相册 视频弹窗
				// 		permision.requestPermission('camera', this.$store.state.mapping.WRITE_EXTERNAL_STORAGE.content, this.$store
				// 			.state.mapping.WRITE_EXTERNAL_STORAGE.title)
				// 		return
				// 	}
				this.$refs.popup.close()
				this.ischose = true
				uni.chooseVideo({
					sourceType: ['camera'],
					success: (res) => {
						console.log(res)
						//临时路径注释 H5页面测试可放开后注释下面的
						// #ifdef H5
						var strFileName = res.tempFilePath.substring(res.tempFilePath
							.lastIndexOf("/") + 1)
						var obj = {
							Mtype: "video",
							Murl: res.tempFilePath,
							name: strFileName,
							FileSize: res.size
						}
						this.entity.imglist.push(obj)
						// #endif
						//保存永久本地路径
						// #ifdef APP
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: (val) => {
								console.log(val)
								var strFileName = val.savedFilePath.substring(val.savedFilePath
									.lastIndexOf("/") + 1)
								var obj = {
									Id: new Date().getTime(),
									Mtype: "video",
									Murl: val.savedFilePath,
									name: strFileName,
									FileSize: res.size
								}
								this.entity.imglist.push(obj)
								// uni.getVideoInfo({
								// 	src: val.savedFilePath,
								// 	success: (info) => {
								// 		console.log(info);
								// 		this.newVal = {
								// 			fullurl: val.savedFilePath,
								// 			width: info.width,
								// 			height: info.height
								// 		}
								// 	},
								// })
							}
						});
						// #endif
					}
				});
			},


			async submit() {
				var that = this
				// setTimeout(() => {
				// 	this.upclick()
				// }, 1000)
				// return
				if (this.entity.imglist.length <= 0) return uni.showToast({
					title: '请至少拍摄一张照片',
					icon: "none"
				});
				let fromData = uni.getStorageSync('fromdata')
				this.entity.Id = new Date().getTime() + ''
				this.$set(this.entity, 'uparr', 0) //整个记录进度条
				this.$set(this.entity, 'buji', 0) //整个记录进度条
				this.$set(this.entity, 'networdlist', []) //网络地址
				this.$set(this.entity, 'upstate', 0) //整个记录上传状态 0待上传 1成功 2 失败 3上传中
				this.$set(this.entity, 'PropData', this.PropData) // 表单数据

				console.log(this.entity);
				if (fromData) {
					var arr = JSON.parse(fromData)
					arr.unshift(this.entity)
					this.ischose = false
					uni.setStorage({
						key: 'fromdata',
						data: JSON.stringify(arr),
						success: () => {
							uni.showToast({
								icon: 'success',
								title: '操作成功',
								duration: 500
							})
							this.entity.imglist = []
							this.entity.Content = ''
							let arr = JSON.parse(uni.getStorageSync('fromdata'))
							this.preEntity = arr[0]
							if (this.newType === '拍照' || this.newType === '拍视频') {
								setTimeout(function() {
									that.upclick()
								}, 300)
							}

						}
					});
				} else {
					console.log(1)
					var arr = [this.entity]
					this.ischose = false
					uni.setStorage({
						key: 'fromdata',
						data: JSON.stringify(arr),
						success: () => {
							uni.showToast({
								icon: 'success',
								title: '操作成功',
								duration: 500
							})
							// this.entity = {
							// 	imglist: []
							// }
							this.entity.imglist = []
							this.entity.Content = ''
							let arr = JSON.parse(uni.getStorageSync('fromdata'))
							this.preEntity = arr[0]
							if (this.newType === '拍照' || this.newType === '拍视频') {
								setTimeout(function() {
									that.upclick()
								}, 300)
							}

						}
					});
				}
			}

		}
	}
</script>
<script module="canvas" lang="renderjs">
	export default {
		methods: {
			// 视图层创建base64图片
			create(newValue, oldValue, ownerInstance) {
				// 第一次进入为空不操作
				console.log(newValue);
				if (newValue == null) {
					return
				}
				// 在缓存中创建video标签
				var video = document.createElement("VIDEO")
				// 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图    
				// 设置video自动播放属性
				video.autoplay = true
				// 该设置方法无效
				// video.setAttribute('autoplay', true)
				// 再添加一个静音的属性，否则自动播放会有声音
				// 该设置方法无效
				// video.setAttribute('muted', true)
				video.muted = true
				// 如果报错Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
				// 可以把下面两行代码加上，因为我用的线上video url，所以可能抛出了异常。大概意思就是跨域了toDataURL()使用了外域资源
				video.setAttribute('crossOrigin', 'anonymous')
				video.crossOrigin = '*'
				// 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源
				video.innerHTML = '<source src=' + newValue.fullurl + ' type="audio/mp4">'
				// 再创建canvas画布标签
				var canvas = document.createElement('canvas');
				var ctx = canvas.getContext('2d');
				// video注册canplay自动播放事件
				// 防止video不播放，所以手动加个播放操作
				video.play()
				// video播放事件
				// 创建画布的宽高属性节点，就是图片的大小，单位PX
				var anw = document.createAttribute("width");
				anw.nodeValue = newValue.width;
				var anh = document.createAttribute("height");
				anh.nodeValue = newValue.height;
				canvas.setAttributeNode(anw);
				canvas.setAttributeNode(anh);
				// 画布渲染
				ctx.drawImage(video, 0, 0, newValue.width, newValue.height);
				// 生成base64图片，指定type为jpeg格式生成的图片base64编码会小很多
				var base64 = canvas.toDataURL('image/jpeg') // 这就是封面图片的base64编码
				// 传递数据给逻辑层
				ownerInstance.callMethod('getBase64', {
					base64: base64
				})
				video.addEventListener('canplay', () => {
					// 删除创建的video 、canvas dom，要不然重新选取视频生成图片不生效
					// ps：开始有这个问题，但是后面不知道为什么又没有了，如果发现生成第一次base64之后再选择不生效，可以尝试一下把下方注释打开
					// document.body.removeChild(video)
					// document.body.removeChild(canvas)
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.image {
		height: 200px;
		width: 90vw;
		margin: 0 auto;
		display: block;
	}

	.margin {
		margin: 0 2%;
	}

	.fixedBtn {
		position: fixed;
		bottom: 70px;
		right: 20rpx;
		/* #ifdef APP */
		bottom: 20rpx;
		/* #endif */
	}

	.takePic {
		background-color: #fff;
		height: 100%;
		overflow: scroll;

		.preForm {

			background: #fff;
			padding: 10px;
			border-top: 1px solid #ccc;

			.preTitle {
				font-weight: bold;
				font-size: 20px;
				margin-bottom: 5px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.more {
					font-weight: normal;
					font-size: 16px
				}
			}

			.prePicBox {
				display: flex;
				flex-wrap: wrap;
				margin: 20rpx 0;

				.pic {
					height: 210rpx;
					box-sizing: border-box;
					border: 1px solid #ccc;
					width: 32%;
					margin-bottom: 10rpx;

				}
			}
		}

		.formCheck {
			width: 100%;
			flex: 1;
			border: 1px solid #e5e5e5;
			box-sizing: border-box;
			border-radius: 4px;
			padding: 0 5px;
			padding-left: 10px;
			position: relative;
			display: flex;
			align-items: center;
			border-bottom: solid 1px #e5e5e5;
			-webkit-user-select: none;
			user-select: none;
			flex-direction: row;
			max-width: 100%;
			height: 35px;
			color: #6a6a6a;
			font-size: 12px;

			.input {
				flex: 1;
				max-width: 100%;

				.value {
					width: 460rpx;
					font-size: 14px;
					color: rgb(58, 58, 58);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.example {
			z-index: 10;
			background-image: url('../../static/start.jpg');
			position: fixed;
			background-size: cover;
			background-repeat: no-repeat;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;

			.icon {
				position: fixed;
				right: 10px;
				top: 54px;
			}

			button {
				position: fixed;
				color: #d1100a;
				font-weight: bold;
				top: 50%;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 245rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 50px;
				// border: 1px solid rgba(0, 0, 0, .2);
				box-shadow: 0px 4px 0px 0 rgba(0, 0, 0, .2);
			}

			.backBtn {
				top: 70%;
			}
		}

		.form {
			// margin-top: 20px;
			background-color: #fff;
			padding: 20px;
		}
	}

	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		transition: opacity 0.3s;
		background: #999;
		opacity: 0;

		&.active {
			opacity: 1;
		}

		.logo {
			position: relative;
			margin-top: -400upx;
			width: 200upx;
			height: 200upx;
			// z-index: -1;
			opacity: 0;
			transition: opacity 0.3s;

			&.active {
				opacity: 1;
			}
		}
	}

	.tabbar-box-wrap {
		position: absolute;
		width: 100%;
		padding: 50upx;
		box-sizing: border-box;
		bottom: 0;
		left: 0;

		.tabbar-box {
			position: relative;
			display: flex;
			width: 100%;
			background: #fff;
			border-radius: 20upx;
			padding: 15upx 20upx;
			box-sizing: border-box;
			z-index: 2;
			box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);

			&:after {
				content: '';
				position: absolute;
				bottom: -16upx;
				left: 0;
				right: 0;
				margin: auto;
				width: 50upx;
				height: 50upx;
				transform: rotate(45deg);
				background: #fff;
				z-index: 1;
				box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
				border-radius: 2px;
			}

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #ffffff;
				border-radius: 20upx;
				z-index: 2;
			}

			.tabbar-box-item {
				// position: relative;
				width: 100%;
				z-index: 3;
				margin: 10upx;
				color: $uni-color-subtitle;
				text-align: center;
				font-size: $uni-font-size-base;

				.box-image {
					width: 100%;
					height: $uni-img-size-lg;
				}
			}
		}
	}
</style>